<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        vue3 使用 proxy 强化了 vue2 的数据劫持，让vue2的响应式丢失问题，在vue3中不在出现

        模板语法的响应式丢失问题
            1. 数据仓库中的对象，初始定义时未描述的属性在后续的运行过程中进行添加，vue3的proxy依然保持响应式劫持特性
                    vue3 的响应式仓库是对变量进行整体监控(取值，赋值，新增，删除……)
                    vue3 对象新增属性依然能够完成响应式操作【变量变化页面更新】

            2. 数据仓库中的数组，在初始的响应式劫持时，不会对内部的每个元素完成递归劫持操作【数组内的元素默认不会被劫持】
                    => vue3 使用的是proxy劫持语法，对数组的下标操作等同于对数组操作，会触发proxy 的 set 方法，依然保持响应式
                    => vue3 虽然使用的是proxy劫持语法，但proxy无法完成原型方法的劫持和监控，
                        所以 vue3 依然通过重写数组的原型方法，让数组的原型方法具有响应式 【数组变更方法】
                        被修改的方法包含了 触发 页面渲染的监听功能 
        </pre>
        <input type="button" value="打印this" @click="printThis()">
        <pre>{{ user }}</pre>
        <input v-model="user.name" type="text" />
        <br>
        <input type="button" value="添加年龄" @click="addAgeItem()">
        <input v-model.number="user.age" type="number" />
        <hr>
        <pre>{{ arr }}</pre>
        <br>
        <input type="button" value="修改下标0的数据" @click="changeArr0()">
        <input type="button" value="添加新元素" @click="addArrNewItem()">
        <ul>
            <li v-for=" (item,i) in arr ">
                <input type="text" v-model="arr[i]">
            </li>
        </ul>
    </div>
    <script type="module">
        let push = Array.prototype.push;

        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    user:{
                        name:"tom"
                    },
                    arr:[1,2,3,4,5]
                }
            },
            methods: {
                printThis(){
                    console.log(this)
                },
                addAgeItem() {
                    this.user.age = 23;
                    console.log(this)
                },
                changeArr0(){
                    this.arr[0] = 1111;
                },
                addArrNewItem(){
                    // this.arr[this.arr.length] = 2222;
                    console.log( this.arr.push == push )
                    this.arr.push(22222)
                }
            },
        }).mount("#app")
    </script>
</body>
</html>